<!-- 经营指标 -->
<template>
	<view class="">
		<view class="br16 br-line margin20">
			<view class="bg-gray padding20" style="font-weight: bold;">交易构成</view>
			<view class="flex-bettwen padding20 bg-white flex-wrap">
				<view class="bg-gray padding30 br16 m-b20 w-220 h-200">
					<view class="color-gray fs26">商品浏览量</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						209,886
					</view>
					<view class="m-t20 color-gray fs24">较上周 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding20 br16 m-b20 w-220 h-200">
					<view class="color-gray fs26">商品支付转化率</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						20.98%
					</view>
					<view class="m-t20 color-gray fs24">较上周 <u-icon name="arrow-downward" class="green-color"></u-icon>
						<text class="green-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding30 br16 m-b20 w-220 h-200">
					<view class="color-gray fs26">支付件数</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						2,867
					</view>
					<view class="m-t20 color-gray fs24">较上周 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding30 br16 m-b20 w-220 h-200">
					<view class="color-gray fs26">支付买家数</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						7,623
					</view>
					<view class="m-t20 color-gray fs24">较上周 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding30 br16 m-b20 w-220 h-200">
					<view class="color-gray fs26">新买家</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						803
					</view>
					<view class="m-t20 color-gray fs24">较上周 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
				<view class="bg-gray padding30 br16 m-b20 w-220 h-200">
					<view class="color-gray fs26">复购买家</view>
					<view class="m-t20 fs32" style="font-weight: bold;">
						233
					</view>
					<view class="m-t20 color-gray fs24">较上周 <u-icon name="arrow-upward" class="price-color"></u-icon>
						<text class="price-color">0.21%</text>
					</view>
				</view>
			</view>

		</view>

		<view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>



	</view>
</template>

<script>
	export default {
		name: 'Deal',
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "商品浏览量",
								data: [5, 8, 25, 37, 15, 20]
							},
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		// width: 750rpx;
		height: 450rpx;
		padding: 20rpx;
	}
</style>